import { IsNotNullOrUndefined } from "@lib/helper";
import {
  createMemo,
  splitProps,
  type JSX,
  type ParentComponent,
} from "solid-js";

const InputGroup: ParentComponent<
  JSX.HTMLAttributes<HTMLDivElement> & { size?: "sm" | "lg" }
> = (props) => {
  const [local, attributes] = splitProps(props, [
    "children",
    "size",
    "classList",
  ]);

  const classList = createMemo(() => {
    return {
      [`input-group-${local.size}`]: IsNotNullOrUndefined(local.size),
    };
  });

  return (
    <div class="input-group" {...attributes} classList={classList()}>
      {local.children}
    </div>
  );
};

export default InputGroup;
